<template>
  <div class="my-counter">
    <button type="button" class="btn btn-light" @click="dwFn">-</button>
    <!-- 与number双向绑定 -->
    <input type="number" class="form-control inp" v-model.number="number">
    <button type="button" class="btn btn-light" @click="upFn">+</button>
  </div>
</template>

<script>
export default {
  props:{
    // 收value
    value:{
      type: Number,
      required: true
    }
  },
  data(){
    return {
      // 放一个number临时存放
      number: 0
    }
  },
  created(){
    // 调用组件打开立马给number赋值
    this.number = this.value
  },
  methods:{
    // 增加
    upFn(){
      this.number++
    },
    // 减少
    dwFn(){
      // 判断是否大于零大于则可以减少
      if(this.number > 0){
        this.number--
      }
    }
  },
  // 监听number如果有变更直接回传给父组件
  watch:{
    number:{
      handler(){
        // 判断用户输入值是否大于零如果是则传给父,不是就重新赋值
        if(this.number > 0){
          this.$emit('input', this.number)
        } else {
          this.number = this.value
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.my-counter {
  display: flex;
  .inp {
    width: 45px;
    text-align: center;
    margin: 0 10px;
  }
  .btn, .inp{
    transform: scale(0.9);
  }
}
</style>